<template>
	<view class="canvas-main">
		<canvas :style="'width:'+widthqianming+'px;height:'+heightqianming+'px;'" canvas-id="canvasIdqianming"></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			//背景图片地址
			bgUrlqianming: {
				type: String,
				default: ''
			},
			//头像图片地址
			photoUrlqianming: {
				type: String,
				default: ''
			},
			//生成的图片格式(jpg或png)
			fileTypeqianming: {
				type: String,
				default: 'png'
			},
			//背景图片宽度(px)
			widthqianming: {
				type: Number,
				default: 300
			},
			//背景图片高度(px)
			heightqianming: {
				type: Number,
				default: 300
			},
			//中间头像图片宽度(px)
			dwidthqianming: {
				type: Number,
				default: 200
			},
			//中间头像图片高度(px)
			dheightqianming: {
				type: Number,
				default: 200
			},
			//背景图片离左边的距离(px)
			xqianming: {
				type: Number,
				default: 0
			},
			//背景图片离上边的距离(px)
			yqianming: {
				type: Number,
				default: 0
			},
			//中间头像离左边的距离(px)
			dxqianming: {
				type: Number,
				default: 50
			},
			//中间头像离上边的距离(px)
			dyqianming: {
				type: Number,
				default: 50
			},
			//背景图片圆角(px)
			radiusqianming: {
				type: Number,
				default: 0
			},
			//背景图片边框宽度(px)
			linewidthqianming: {
				type: Number,
				default: 0
			},
			//背景图片边框颜色
			lineColorqianming: {
				type: String,
				default: '#FFFFFF'
			},
			//中间头像圆角(px)
			dRadiusqianming: {
				type: Number,
				default: 0
			},
			//中间头像边框宽度(px)
			dLinewidthqianming: {
				type: Number,
				default: 0
			},
			//中间头像边框颜色
			dLineColorqianming: {
				type: String,
				default: '#FFFFFF'
			},
		},
		methods: {
			getNewUrl() {
				// console.log('过来了没')
				let self = this
				const systemInfo = uni.getSystemInfoSync()
				// console.log(systemInfo,'过来了没01')
				let pixelRatio = systemInfo.pixelRatio
				// console.log(pixelRatio,'过来了没02')
				let context = uni.createCanvasContext('canvasIdqianming', this)
				// console.log(context,'过来了没03')
				this.getImageInfo(this.bgUrlqianming, res => {
					this.bgUrlqianming = res
					console.log(this.bgUrlqianming,'过来了没1')
					this.getImageInfo(this.photoUrlqianming, async res1 => {
						this.photoUrlqianming = res1
						console.log(this.photoUrlqianming,'过来了没12')
						if (this.radiusqianming > 0 || this.linewidthqianming > 0) {
							context.beginPath()
							context.moveTo(this.xqianming + this.radiusqianming, this.yqianming)
							context.arcTo(this.xqianming + this.widthqianming, this.yqianming, this.xqianming + this.widthqianming, this.yqianming +
								this.radiusqianming, this.radiusqianming)
							context.lineTo(this.xqianming + this.widthqianming, this.yqianming + this.heightqianming - this.radiusqianming)
							context.arcTo(this.xqianming + this.widthqianming, this.yqianming + this.heightqianming, this.xqianming + this
								.widthqianming - this.radiusqianming, this.yqianming + this.heightqianming, this.radiusqianming)
							context.lineTo(this.xqianming + this.radiusqianming, this.yqianming + this.heightqianming)
							context.arcTo(this.xqianming, this.yqianming + this.heightqianming, this.xqianming, this.yqianming + this
								.heightqianming - this.radiusqianming, this.radiusqianming)
							context.lineTo(this.xqianming, this.yqianming + this.radiusqianming)
							context.arcTo(this.xqianming, this.yqianming, this.xqianming + this.radiusqianming, this.yqianming, this.radiusqianming)
							context.closePath()
							context.clip()
						}
						await context.drawImage(this.bgUrlqianming, this.xqianming, this.yqianming, this.widthqianming, this.heightqianming)
						console.log(this.xqianming,'过来了没13')
						console.log(this.yqianming,'过来了没14')
						console.log(this.widthqianming,'过来了没15')
						console.log(this.heightqianming,'过来了没16')
						if (this.linewidthqianming) {
							context.linewidth = this.linewidthqianming
							context.strokeStyle = this.lineColorqianming
							context.stroke()
						}
						if (this.dRadiusqianming > 0 || this.dLinewidthqianming > 0) {
							context.beginPath()
							context.moveTo(this.dxqianming + this.dRadiusqianming, this.dyqianming)
							context.arcTo(this.dxqianming + this.dwidthqianming, this.dyqianming, this.dxqianming + this.dwidthqianming, this
								.dy +
								this.dRadiusqianming, this.dRadiusqianming)
							context.lineTo(this.dxqianming + this.dwidthqianming, this.dyqianming + this.dheightqianming - this
								.dRadius)
							context.arcTo(this.dxqianming + this.dwidthqianming, this.dyqianming + this.dheightqianming, this.dxqianming + this
								.dwidthqianming - this.dRadiusqianming, this.dyqianming + this.dheightqianming, this.dRadiusqianming)
							context.lineTo(this.dxqianming + this.dRadiusqianming, this.dyqianming + this.dheightqianming)
							context.arcTo(this.dxqianming, this.dyqianming + this.dheightqianming, this.dxqianming, this.dyqianming + this
								.dheightqianming - this.dRadiusqianming, this.dRadiusqianming)
							context.lineTo(this.dxqianming, this.dyqianming + this.dRadiusqianming)
							context.arcTo(this.dxqianming, this.dyqianming, this.dxqianming + this.dRadiusqianming, this.dyqianming, this
								.dRadius)
							context.closePath()
							context.clip()
						}
						await context.drawImage(this.photoUrlqianming, this.dxqianming, this.dyqianming, this.dwidthqianming, this
							.dheightqianming)
							
						console.log(this.dxqianming,'过来了没33')
						console.log(this.dyqianming,'过来了没34')
						console.log(this.dwidthqianming,'过来了没35')
						console.log(this.dheightqianming,'过来了没36')
						
						if (this.dLinewidthqianming) {
							context.linewidth = this.dLinewidthqianming
							context.strokeStyle = this.dLineColorqianming
							context.stroke()
						}
						console.log(self.fileTypeqianming,'过来了没2')
						console.log(self.widthqianming,'过来了没23')
						console.log(self.heightqianming,'过来了没24')
						console.log(context,'过来了没25')
						context.draw(false, () => {
							uni.canvasToTempFilePath({
								canvasId: 'canvasIdqianming',
								fileType: self.fileTypeqianming,
								quality: 1,
								width: self.widthqianming,
								height: self.heightqianming,
								destwidth: self.widthqianming * pixelRatio,
								destheight: self.heightqianming * pixelRatio,
								success: (res) => {
									console.log(res.tempFilePath,'过来了没256')
									self.$emit('changeqianming', res.tempFilePath)
								},
								fail: (err) => {
									console.log('生成图片失败:', err)
								}
							}, self)
						}, self)
					})
				})
			},
			getImageInfo(src, callback) {
				uni.getImageInfo({
					src: src,
					success: (res) => {
						callback(res.path)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.canvas-main {
		position: fixed;
		z-index: -999999 !important;
		opacity: 0;
		top: -5000rpx;
	}
</style>